<script lang="tsx">
import { defineComponent, Transition, h } from 'vue';

/**
 * 
 * 层级上一层、下一层
 * 复制
 * 移除  
 * 
 * 
 */

export default defineComponent({
   name: 'matemenu',
   props: ['menusposi', 'ismenu'],
   emits:['MenuClick'],
   setup(props,{emit}) {
      const menulists = [
          {
            label:'移除',
            value:'remove'
          },
          {
            label:'复制',
            value:'copy'
          },
          {
            label:'上一层',
            value:'pre'
          },
          {
            label:'下一层',
            value:'next'
          },
      
          {
            label:'编辑',
            value:'editor'
          },
      ]
      const handleClick = (e)=>{
            emit('MenuClick',e)
      }
      const Menutip = () => {
         return (
            <div v-show={props.ismenu}  class='menucon'
               style={{ left: `${props.menusposi.x}px`, top: `${props.menusposi.y}px` }}
            >
               <ul class="menulist">
                  {
                     menulists.map(item=>(
                        <li class="menuitem" onClick={()=>handleClick(item.value)} datatype={item.value}>{item.label}</li>
                     ))
                  } 
               </ul>
            </div>
         )
      }
      return () => h(Transition, {
         name: 'menu'
      }, {
         default: props => h(Menutip, null,{})
      })
   }
})

</script>
<style lang="less" scoped>
// less 中 父级样式 无法用于 插槽 解决办法就是使用v-deep
::v-deep(.menulist){
   list-style: none; 
      .menuitem{
          font-size: .7rem;
          list-style: none;
          margin:.3rem 0;
          padding: .3rem;
          box-sizing: border-box;
          cursor: pointer;
          border-radius: 3px;
          &:hover{
              background-color: rgb(156, 177, 177);
          }
      }
}


.menu-enter-from,
.menu-leave-to {
      transform: scale(0);
     
}
// 元素进入结束的状态 ｜ 元素开始离开的状态。     这里不写也可以！！！！！！
.menu-enter-to,
.menu-leave-from {
   transform: scale(1);
}
// 元素进入 ｜ 结束时，过渡的效果
.menu-enter-active,
.menu-leave-active {
  // 过渡动画的使用
  transition: transform .1s linear 0s;
}




.menucon {
   position: absolute;
   top: 10px;
   left: 10px;
   width: 70px;
   background-color: #fff;
   transform-origin: 0 0;
   padding: .1rem;
   box-sizing: border-box;
   border-radius: 3px; 
}
</style>